<template>
  <view class="table-container">
    <flowTable :processInstanceId="processInstanceId"></flowTable>
  </view>
</template>

<script setup lang="ts">
import { request } from '@/utils/request';

const emits = defineEmits(['success']);
const props = defineProps({
  processInstanceId: {
    type: String,
    default: '',
  },
});
const state = reactive({
  dataList: [],
  page: 1,
  total: 0,
  isPage: false,
  api: '',
  createdGetData: false,
});
const options = reactive({
  column: [
    {
      title: '当前环节',
      field: 'activityName',
      align: 'center',
      minWidth: 220,
    },
    {
      title: '处理人',
      field: 'assigneeName',
      align: 'center',
      minWidth: 200,
    },
    {
      title: '任务开始时间',
      field: 'startDate',
      align: 'center',
      minWidth: 200,
    },
    {
      title: '任务结束时间',
      field: 'endDate',
      align: 'center',
      minWidth: 200,
    },
    {
      title: '审批意见',
      field: 'comment',
      align: 'center',
      minWidth: 200,
    },
    {
      title: '任务时长',
      field: 'duration',
      align: 'center',
      minWidth: 200,
    },
  ],
});
const getFlowDetails = () => {
  if (!props.processInstanceId) return;
  request({
    url: '/engine/history/listProcessInstanceHistory',
    method: 'GET',
    query: { processInstanceId: props.processInstanceId },
  })
    .then((res) => {
      if (res.code === 0) {
        if (res.data) {
          const taskId = res.data[res.data.length - 1]?.taskId;
          emits('success', taskId);
          getPersions(taskId);
          state.dataList = res.data;
        }
      }
    })
    .catch((err) => {
      console.log(err);
      uni.showToast({
        title: err.message || err.error || err.msg || '操作失败',
        icon: 'none',
      });
    });
};
const getPersions = (taskId: any) => {
  if (!taskId) return;
  request({
    url: `/engine/task/detail/setting/${taskId}`,
    method: 'GET',
    query: {},
  })
    .then((res) => {
      if (res.code === 0) {
        const permissions = res.data?.formPermissions;
        const _permissions = {};
        if (permissions && permissions.length) {
          for (let index = 0; index < permissions.length; index++) {
            const element = permissions[index];
            const obj = {};
            element.list.map((item: { dbFieldName: string | number }) => {
              obj[item.dbFieldName] = item;
              return item;
            });
            _permissions[element.name] = obj;
          }
          res.data._permissions = _permissions;
        }
        uni.$emit('flowPermission', res.data);
      }
    })
    .catch((err) => {
      console.log(err);
      uni.showToast({
        title: err.message || err.error || err.msg || '操作失败',
        icon: 'none',
      });
    });
};
onMounted(() => {
  getFlowDetails();
});
// export default {
//   props: {
//     processInstanceId: {
//       type: String,
//       default: '',
//     },
//   },
//   data() {
//     return {
//       dataList: [],
//     };
//   },
//   created() {},
//   watch: {
//     processInstanceId: {
//       handler(val) {
//         if (val) {
//           this.getFlowDetails(val);
//         } else {
//           this.dataList = [];
//         }
//       },
//       immediate: true,
//     },
//   },
//   methods: {
//     getFlowDetails(processInstanceId) {
//       request({
//         url: '/open/workflow/historic/list',
//         method: 'get',
//         data: { processInstanceId },
//         needToken: true,
//       })
//         .then((res) => {
//           if (res.code === 0) {
//             if (res.data) {
//               this.$emit('success', res.data[res.data.length - 1]?.taskId);
//               // 此处不再处理任务列表的合并了，接口已经处理好，前端直接使用即可
//               this.dataList = res.data;
//               // this.handleData(res.data)
//             }
//           }
//         })
//         .catch((err) => {
//           console.log(err);
//           uni.showToast({
//             title: err.message || err.error || err.msg || '操作失败',
//             icon: 'none',
//           });
//         });
//     },
//     handleData(data) {
//       const dataList = [];
//       data.forEach((item, index) => {
//         if (item.endTime) {
//           item.isComplate = true;
//         }
//         // 向上寻找activityName相同的节点
//         let i = 0;
//         while (i < index) {
//           if (dataList[i]?.activityName === item.activityName) {
//             if (!dataList[i].children) {
//               dataList[i] = {
//                 activityName: item.activityName,
//                 children: [dataList[i], item],
//               };
//             } else {
//               dataList[i].children.push(item);
//             }
//             dataList.push({ is_empty: true });
//             return;
//           }
//           i++;
//         }
//         dataList.push(item);
//         // return item
//       });
//       this.dataList = dataList
//         .filter((item) => !item.is_empty)
//         .map((item) => {
//           if (item.children && item.children.length) {
//             const _children = JSON.parse(JSON.stringify(item.children));
//             const _item = item.children.find((e) => e.action);
//             if (_item) {
//               _item.children = _children;
//               return _item;
//             }
//             return item;
//           }
//           return item;
//         });
//       console.log(this.dataList);
//     },
//     getCountersignName(list) {
//       // 判断如果没有action 显示全部，有则只显示action的人的名字
//       const actionPerson = list.find((item) => item.action);
//       if (actionPerson) {
//         return actionPerson.assigneeName;
//       }
//       return list
//         .map((item) => item.assigneeName)
//         .filter((item) => item)
//         .join('/');
//     },
//     showMoreText(text) {
//       uni.navigateTo({
//         url: '/pages/common/preview-text',
//         animationType: 'fade-in',
//       });
//       setTimeout(() => {
//         uni.$emit('setPreviewText', text);
//       }, 300);
//     },
//   },
// };

defineExpose({
  getFlowDetails,
});
</script>

<style scoped lang="scss">
.table-container {
  width: 100%;
  /* max-height: 60vh; */
  overflow: auto;
  /* // pointer-events: all; */
  &::-webkit-scrollbar {
    display: initial;
    width: 8rpx;
    height: 10rpx;
    border-radius: 8rpx;
  }

  &::-webkit-scrollbar-thumb {
    min-height: 10rpx;
    background-color: rgb(0 0 0 / 30%);
    background-clip: padding-box;
    border-radius: 8rpx;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: rgb(0 0 0 / 50%);
    border-radius: 8rpx;
  }

  .flow-details {
    min-width: 800px;
  }

  table {
    width: 100%;
    margin: auto;
    /* // min-width: 1000px; */
    font-size: 0.875rem;
    font-weight: initial;
    border-collapse: collapse;

    tr:nth-child(2n + 3) {
      background-color: #f8fbff;
    }

    th {
      position: relative;
      box-sizing: border-box;
      min-width: 80rpx;
      height: 88rpx;
      padding: 10rpx;
      font-size: 0.875rem;
      color: #777;
      word-break: break-all;
      /* // font-weight: initial; */
      white-space: pre-line;
      background-color: #f7f7f7;
      /* // border: 1rpx solid #666; */
      border: 1rpx solid #dedede;

      &[align='center'] {
        text-align: center;
      }

      &[align='left'] {
        text-align: left;
      }

      &[align='right'] {
        text-align: right;
      }
    }

    td {
      position: relative;
      box-sizing: border-box;
      min-width: 80rpx;
      height: 88rpx;
      padding: 10rpx;
      font-size: 0.875rem;
      word-break: break-all;
      white-space: pre-line;
      /* // border: 1rpx solid #666; */
      border: 1rpx solid #dedede;

      &[align='center'] {
        text-align: center;
      }

      &[align='left'] {
        text-align: left;
      }

      &[align='right'] {
        text-align: right;
      }

      &.danger {
        color: #f56c6c;
      }

      textarea {
        width: auto;
        font-size: 0.875rem;
      }

      input {
        font-size: 0.875rem;
      }

      .inline-content {
        input {
          position: relative;
          top: 12rpx;
          display: inline-block;
          width: 60rpx;
          height: 28rpx;
          font-size: 0.875rem;
          line-height: 28rpx;
          text-align: center;
        }
      }

      .more-text {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      /* .link {
        color: $color-primary;
      } */
    }
  }
}
</style>
